﻿@page "/dialogs"

<h3>@Localizer["H1"]</h3>
<h4>@Localizer["H2"]</h4>

<p>@Localizer["P1"]：</p>

<p class="code-label">@Localizer["P2"] <code>DialogService</code></p>
<Pre>@@inject DialogService DialogService</Pre>
<Pre>[Inject]
[NotNull]
private DialogService? DialogService { get; set; }
</Pre>
<p class="code-label">@Localizer["P3"] <code>api</code></p>
<Pre>var op = new DialogOption()
{
    Title = @Localizer["P4"],
    ShowFooter = false,
    BodyContext = DataPrimaryId
};
op.Component = BootstrapDynamicComponent.CreateComponent&lt;DataDialogComponent&gt;(new Dictionary&lt;string, object?&gt;
{
    [nameof(DataDialogComponent.OnClose)] = new Action(async () => await op.Dialog.Close())
});
await DialogService.Show(op);</Pre>

<DemoBlock Title="@Localizer["P5"]" Introduction="@Localizer["P6"]" Name="Keyboard">
    <div>
        <p>@Localizer["P7"] <code>DialogOption</code> <code>IsKeyboard</code> @Localizer["P8"]</p>
        <Button OnClick="@OnClick">@Localizer["P9"]</Button>
        <Button OnClick="@OnClickKeyboard" Text="@($"Keyboard: {IsKeyboard}")" class="ms-3" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["P10"]" Introduction="@Localizer["P11"]" Name="CustomerHeader">
    <div>
        <Button OnClick="@OnCustomerHeaderClick" Text="@Localizer["P12"]" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["P13"]" Introduction="@Localizer["P14"]" Name="Component">
    <p>@Localizer["P15"]</p>
    <Button @onclick="@OnClickCounter">@Localizer["P16"]</Button>
</DemoBlock>

<DemoBlock Title="@Localizer["P17"]" Introduction="@Localizer["P18"]" Name="BodyContext">
    <p>
        @Localizer["P19"]
    </p>
    <Button @onclick="@OnClickParameter">@Localizer["P20"]</Button>
</DemoBlock>

<DemoBlock Title="@Localizer["P21"]" Introduction="@Localizer["P22"]" Name="Apply">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Select @bind-Value="@DataPrimaryId" DisplayText="@Localizer["P23"]" ShowLabel="true">
                <Options>
                    <SelectOption Text="1" Value="1"></SelectOption>
                    <SelectOption Text="2" Value="2"></SelectOption>
                    <SelectOption Text="3" Value="3"></SelectOption>
                    <SelectOption Text="4" Value="4"></SelectOption>
                    <SelectOption Text="5" Value="5"></SelectOption>
                    <SelectOption Text="6" Value="6"></SelectOption>
                    <SelectOption Text="7" Value="7"></SelectOption>
                    <SelectOption Text="8" Value="8"></SelectOption>
                    <SelectOption Text="9" Value="9"></SelectOption>
                    <SelectOption Text="10" Value="10"></SelectOption>
                </Options>
            </Select>
        </div>
        <div class="col-12 col-sm-6 align-self-end">
            <Button @onclick="@OnClickShowDataById">@Localizer["P24"]</Button>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["P25"]" Introduction="@Localizer["P26"]" Name="CloseDialogByCode">
    <p>@Localizer["P27"] <code>DialogOption</code> @Localizer["P28"] <code>Dialog</code> @Localizer["P29"] <code>Toggle/Close</code> @Localizer["P30"]</p>

    <Button @onclick="@Show">Dialog</Button>
</DemoBlock>

<DemoBlock Title="@Localizer["P31"]" Introduction="@Localizer["P32"]" Name="DisableHeaderCloseButton">
    <p>@Localizer["P33"] <code>ShowHeaderCloseButton</code> @Localizer["P34"] <code>Header</code> @Localizer["P35"]</p>

    <Button @onclick="@ShowNoHeaderCloseButtonDialog">Dialog</Button>
</DemoBlock>

<DemoBlock Title="@Localizer["P36"]" Introduction="@Localizer["P37"]" Name="MultipleDialog">
    <p>@Localizer["P38"]</p>
    <ul class="ul-demo mb-3">
        <li>@Localizer["P39"]</li>
        <li>@Localizer["P40"]</li>
        <li>@Localizer["P41"]</li>
        <li>@Localizer["P42"]</li>
    </ul>

    <Button OnClick="@ShowDialogLoop">@Localizer["P43"]</Button>
</DemoBlock>

<DemoBlock Title="@Localizer["P44"]" Introduction="@Localizer["P45"]" Name="ModalDialog">
    <p>@Localizer["P46"]</p>
    <ul class="ul-demo mb-3">
        <li>@Localizer["P47"]</li>
        <li>@Localizer["P48"]</li>
        <li>@Localizer["P49"]</li>
        <li>@Localizer["P50"]</li>
    </ul>
    <Button OnClick="@OnResultDialogClick">@Localizer["P51"]</Button>
    <BlockLogger @ref="Trace" class="mt-3" />
</DemoBlock>

<DemoBlock Title="@Localizer["P52"]" Introduction="@Localizer["P53"]" Name="EditDialog">
    <p>@Localizer["P54"]</p>
    <ul class="ul-demo mb-3">
        <li>@Localizer["P55"]</li>
        <li>@Localizer["P56"]</li>
        <li>@Localizer["P57"]</li>
    </ul>
    <Button OnClick="@OnEditDialogClick">@Localizer["P58"]</Button>
</DemoBlock>

<DemoBlock Title="@Localizer["P59"]" Introduction="@Localizer["P60"]" Name="SearchDialog">
    <p>@Localizer["P61"]</p>
    <ul class="ul-demo mb-3">
        <li>@Localizer["P62"]</li>
        <li>@Localizer["P63"]</li>
        <li>@Localizer["P64"]</li>
    </ul>
    <Button OnClick="@OnSearchDialogClick">@Localizer["P65"]</Button>
</DemoBlock>

<DemoBlock Title="@Localizer["P66"]" Introduction="@Localizer["P67"]" Name="SaveDialog">
    <p>@Localizer["P68"]</p>
    <ul class="ul-demo mb-3">
        <li>@Localizer["P69"]</li>
        <li>@Localizer["P70"]</li>
    </ul>
    <Button OnClick="@OnSaveDialogClick">@Localizer["P71"]</Button>
</DemoBlock>

<DemoBlock Title="@Localizer["P72"]" Introduction="@Localizer["P73"]" Name="ModalDialog">
    <Button OnClick="@OnSizeDialogClick">@Localizer["P74"]</Button>
</DemoBlock>

<DemoBlock Title="@Localizer["P75"]" Introduction="@Localizer["P76"]" Name="PrintDialog">
    <p>@Localizer["P77"] <code>@nameof(DialogOption.PrintButtonText)</code> @Localizer["P78"]</p>
    <Button OnClick="@OnPrintDialogClick">@Localizer["P79"]</Button>
</DemoBlock>

<DemoBlock Title="@Localizer["P80"]" Introduction="@Localizer["P81"]" Name="PrintDialog">
    <Button OnClick="@OnMaximizeDialogClick">@Localizer["P82"]</Button>
</DemoBlock>

<DemoBlock Title="@Localizer["P83"]" Introduction="@Localizer["P84"]" Name="ErrorLogger">
    <Button OnClick="@OnErrorDialog" Text="@Localizer["P85"]" Icon="fa-solid fa-bug"></Button>
</DemoBlock>

<DemoBlock Title="@Localizer["P86"]" Introduction="@Localizer["P87"]" Name="Email">
    <p>@Localizer["P88"]</p>
    <ul class="ul-demo mb-3">
        <li>@Localizer["P89"]</li>
        <li>@Localizer["P90"]</li>
        <li>@Localizer["P91"]</li>
        <li>@Localizer["P92"]</li>
        <li>@Localizer["P93"]</li>
        <li>@Localizer["P94"]</li>
        <li>@Localizer["P95"]</li>
    </ul>
    <label class="form-label">@Localizer["P96"]：</label>
    <div class="input-group">
        <BootstrapInput PlaceHolder="@Localizer["P97"]" Value="@InputValue"></BootstrapInput>
        <Button Icon="fa-regular fa-address-card" OnClick="@OnEmailButtonClick"></Button>
    </div>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" Title="@Localizer["P98"]" />
